<script>
import { defineComponent, ref, onMounted } from '@vue/composition-api';
import { checkActivity, GetUserList } from '@/api/activity';
import router from '@/router';
import { mapGetters } from 'vuex';
import { ActivityStatusMap, ActivityContentMap, ActivityTypeMap } from '../enum';
import { MessageBox, Message } from 'element-ui';
import Clipboard from 'clipboard';
export default defineComponent({
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapGetters(['name']),
  },
  setup(props) {
    const checkRemark = ref();
    const curSteps = ref(2);
    const stepsText = ref("");
    const formModel = ref({
      type: null,
      checkRemark: null,
      overCheckRemark: null,
    });
    const formRule = ref({
      type: [{ required: true, message: '请选择审核', trigger: 'change' }],
      checkRemark: [{ required: true, message: '请输入活动审批意见', trigger: 'change' }],
      overCheckRemark: [{ required: true, message: '请输入完结审批意见', trigger: 'change' }],
    });
    const loading = ref(false);
    const formRef = ref();

    // 人员数据
    const searchUser = async (query, adminIdNum) => {
      loading.value = true;
      const payload = {
        keyword: query,
        pageSize: 99,
        pageNum: 1,
      };
      const response = await GetUserList(query);
      loading.value = false;
      if (response.code === 200) {
        // const res = new Map();
        // userList.value = response.rows.filter((response.rows) => !res.has(response.rows.unitName) && res.set(response.rows.unitName,1));
        console.log(query, response.rows[0].userName, 'reoeoeoeooe');
        return response.rows[0].userName;
        // if(adminIdNum==1){
        //   props.detail.adminId = response.rows[0].userName;
        // }else{
        //   props.detail.adminId2 = response.rows[0].userName;
        // }
      }
    };
    // 下载
    const openUrl = fileName => {
      console.log(props.detail.postId, fileName, 'detail.postId');
      window.open(process.env.VUE_APP_BASE_API +`/api/images/showLocal?name=${fileName}`);
    };
    //预览
    const preview = fileName => {
      console.log(fileName, 'fileName');
      window.open(
        'https://ow365.cn/?i=29710&ssl=1&furl=' + process.env.VUE_APP_BASE_API + '/api/images/showLocal?name=' +
          fileName
      );
    };
    const cancelActvity = () => {
      MessageBox.confirm(`确认取消活动?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        loading.value = true;
        const payload = {
          activityId: props.detail.activityId,
          activityStatus: 7,
        };
        const response = await checkActivity(payload);
        loading.value = false;
        if (response.code === 200) {
          Message({
            message: '取消成功',
            type: 'success',
          });
          router.go(-1);
        }
      });
    };

    const check = async query => {
      query.validate(async valid => {
        if (valid) {
          console.log(formModel, 'formModel');
          loading.value = true;
          const payload = {
            activityId: props.detail.activityId,
            activityStatus: formModel.value.type,
            checkRemark: formModel.value.checkRemark,
            overCheckRemark: formModel.value.overCheckRemark,
          };
          const response = await checkActivity(payload);
          loading.value = false;
          if (response.code === 200) {
            Message({
              message: '审核成功',
              type: 'success',
            });
            router.go(-1);
          }
        } else {
          Message.error({
            message: '请完整审核信息',
          });
        }
      });
    };

    const editActivity = (activityId, type, studentId) => {
      router.push({ path: '/activity/createActivity', query: { activityId, type, studentId } });
    };
    const copy = () => {
      var clipboard = new Clipboard('.tag-read');
      clipboard.on('success', e => {
        console.log('复制成功');
        Message({
          message: '复制成功',
          type: 'success',
        });
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制');
        Message.error({
          message: '该浏览器不支持自动复制',
        });
        // 释放内存
        clipboard.destroy();
      });
    };

    onMounted(() => {
      // loadData();
      var state = [];
      setTimeout(() => {
        //  }, 1000)
        if (props.detail) {
          if (props.detail.chair) {
            //有宣传部讲座审批单直接系统审核
            // 1,提交 2.系统审核 3.报名 4.活动进行 5.完结 6.完结审核
            state = [1, 0, 1, 4, 5, 6, 4, 0, 2, 3, 4, 4, 4, 1];
          } else {
            // 1,提交 2.审核员审核 3.系统审核 4.报名 5.活动进行 6.完结 7.完结审核
            state = [2, 0, 1, 5, 6, 7, 5, 0, 3, 4, 5, 5, 5, 1];
          }
          console.log(state, 'state');
          curSteps.value = null;
          if (props.detail.activityStatus == '-1') {
            curSteps.value = 0;
          } else {
            curSteps.value = state[props.detail.activityStatus];
          }
          console.log(curSteps.value, 'curSteps.value');
          if (props.detail.nextAuditor.length >= 1) {
            var checkUser = props.detail.nextAuditor[0].nickName; // + '-' + props.detail.nextAuditor[0].userName
            for (
              let i = 1;
              i < (props.detail.nextAuditor.length >= 3 ? 3 : props.detail.nextAuditor.length - 1);
              i++
            ) {
              checkUser = checkUser + (i == 0 ? '' : '\n') + props.detail.nextAuditor[i].nickName;
              //  +
              // '-' +
              // props.detail.nextAuditor[i].userName;
              console.log(checkUser, 'checkUser');
            }
            console.log(checkUser, 'checkUser');
            stepsText.value = checkUser;
          }
        }
      }, 1000);
    });

    return {
      ActivityStatusMap,
      ActivityContentMap,
      ActivityTypeMap,
      openUrl,
      preview,
      cancelActvity,
      searchUser,
      check,
      checkRemark,
      curSteps,
      stepsText,
      formModel,
      formRef,
      formRule,
      editActivity,
      copy,
    };
  },
});
</script>

<template>
  <div class="app-container">
    <el-steps style="margin-bottom: 20px; white-space: pre-line" :active="curSteps">
      <el-step title="提交"></el-step>
      <el-step
        style="white-space: pre-line"
        v-if="!detail.chair"
        title="系部/部处审核"
        finish-status="success"
        direction="vertical"
      >
        <template slot="description">
          <!-- //利用插槽 -->
          <span>{{ detail.activityStatus == 2 ? stepsText : detail.auditor1 }}</span
          ><br />
          <a
            style="color: #409eff; text-decoration: underline"
            class="tag-read"
            v-if="detail.activityStatus == 2"
            :data-clipboard-text="
              'https://erke.hdu.edu.cn/weixin/#/pages/activity/activityDetail/activityDetail?id=' +
              detail.activityId
            "
            @click="copy"
          >
            复制审核链接
          </a>
        </template>
      </el-step>
      <el-step style="white-space: pre-line" title="校团委审核">
        <!-- :description="detail.activityStatus == 0 ? stepsText : null" -->
        <template slot="description">
          <!-- //利用插槽 -->
          <span>{{ detail.activityStatus == 0 ? stepsText : detail.auditor2 }}</span
          ><br />
          <!-- class="tag-read" -->
          <a
            v-if="detail.activityStatus == 0"
            style="color: #409eff; text-decoration: underline"
            :data-clipboard-text="
              'https://erke.hdu.edu.cn/weixin/#/pages/activity/activityDetail/activityDetail?id=' +
              detail.activityId
            "
            @click="copy"
          >
            复制审核链接
          </a>
        </template>
      </el-step>
      <el-step title="活动报名"></el-step>
      <el-step title="活动进行"></el-step>
      <el-step title="活动完结申请"></el-step>
      <el-step style="white-space: pre-line" title="完结审核">
        <!-- :description="detail.activityStatus == 4 ? stepsText : null" -->
        <template slot="description">
          <!-- //利用插槽 -->
          <span>{{ detail.activityStatus == 4 ? stepsText : detail.auditor3 }}</span
          ><br />
          <a
            style="color: #409eff; text-decoration: underline"
            class="tag-read"
            v-if="detail.activityStatus == 4"
            :data-clipboard-text="
              'https://erke.hdu.edu.cn/weixin/#/pages/activity/activityDetail/activityDetail?id=' +
              detail.activityId
            "
            @click="copy"
          >
            复制审核链接
          </a>
        </template>
      </el-step>
      <!-- <el-step title="活动完成" ></el-step> -->
    </el-steps>
    <el-row>
      <el-descriptions border :column="2">
        <el-descriptions-item>
          <template slot="label"> 活动名称 </template>
          {{ detail.activityName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动状态 </template>
          {{ ActivityStatusMap.get(detail.activityStatus) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动类型 </template>
          {{ ActivityContentMap.get(detail.activityContent) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动内容 </template>
          {{ ActivityTypeMap.get(detail.activityType) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 主办单位 </template>
          {{ detail.hostName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 协办单位 </template>
          {{ detail.cooperativeUnitName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动时间 </template>
          {{ `${detail.activityStartTime} - ${detail.activityEndTime}` }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动地点 </template>
          {{ detail.position }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 活动简介 </template>
          {{ detail.txt }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 海报 </template>
          <el-image
            v-if="detail.postId"
            style="width: 100px; height: 100px"
            :src="detail.postId"
            :preview-src-list="[detail.postId]"
            fit="cover"
          >
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预估活动规模 </template>
          {{ detail.size }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动区域 </template>
          {{ detail.movementArea }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 报名限制 </template>
          {{ detail.majorsRestricted }} &nbsp;{{ detail.gradeRestricted }}&nbsp;
          {{ detail.unitRestrictedName }}&nbsp; {{ detail.stuOrgRestrictedName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 管理员1 </template>
          {{ detail.adminId }}{{ detail.adminPhone ? ' - ' + detail.adminPhone : '' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 管理员2</template>
          {{ detail.adminId2 ? detail.adminId2 : ''
          }}{{ detail.adminPhone2 ? ' - ' + detail.adminPhone2 : '' }}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label"> 预申报积分 </template>
          {{ detail.mark }}
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template slot="label"> 报备信息 </template>
          {{ detail.remark }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 最大报名人数 </template>
          {{ detail.applyCount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 报名截止时间 </template>
          {{ detail.applyEndTime }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 场地审批单 </template>
          <el-button type="text" @click="preview(detail.place)"
            >{{ detail.place }} -
            <span v-if="detail.place" @click="openUrl(detail.place)">下载</span></el-button
          >
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 安全预案 </template>
          <el-button type="text" @click="preview(detail.security)"
            >{{ detail.security }} -
            <span v-if="detail.security" @click="openUrl(detail.security)">下载</span></el-button
          >
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 宣传部讲座审批单 </template>
          <el-button type="text" @click="preview(detail.chair)"
            >{{ detail.chair }} -
            <span v-if="detail.chair" @click="openUrl(detail.chair)">下载</span></el-button
          >
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 宣传部物品审批单 </template>
          <el-button type="text" @click="preview(detail.materials)"
            >{{ detail.materials }} -
            <span v-if="detail.materials" @click="openUrl(detail.materials)">下载</span></el-button
          >
        </el-descriptions-item>
        <!-- <el-descriptions-item :span="2">
          <template slot="label"> 办结附件 </template>
          <el-button type="text" @click="preview(detail.over)">{{ detail.over }} - <span v-if="detail.over" @click="openUrl(detail.over)">下载</span></el-button>
        </el-descriptions-item> -->
        <el-descriptions-item
          labelStyle="border:2px solid red;color:red"
          contentStyle="border:2px solid red;color:red"
          v-if="detail.activityStatus == 1 || detail.activityStatus == 6"
          :span="2"
        >
          <template slot="label"> 活动审核意见 </template>
          <div>{{ detail.activityStatus == 1 ? detail.checkRemark : detail.overCheckRemark }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-row>
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="formRule"
      inline
      size="mini"
      v-if="detail.activityStatus == 0"
      style="padding-top: 20px"
      v-hasPermi="['activity:seminar:approvalPass']"
    >
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item v-if="formModel.type == '1'" label="系统管理员审批意见" prop="checkRemark">
            <el-input
              style="width: 450px"
              v-model="formModel.checkRemark"
              placeholder="请输入审批不通过原因"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="系统管理员审核" prop="type">
          <el-select v-model="formModel.type" placeholder="请选择">
            <el-option label="审核通过" value="8" />
            <el-option label="审核不通过" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="check(formRef)">审核确认</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-form
      ref="formRef"
      :model="formModel"
      :rules="formRule"
      inline
      size="mini"
      v-if="detail.activityStatus == 2"
      style="padding-top: 20px"
      v-hasPermi="['activity:seminar:approvalPass1']"
    >
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item v-if="formModel.type == '13'" label="审核员审批意见" prop="checkRemark">
            <el-input
              style="width: 450px"
              v-model="formModel.checkRemark"
              placeholder="请输入审批不通过原因"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="审核员审核" prop="type">
          <el-select v-model="formModel.type" placeholder="请选择">
            <el-option label="审核通过" value="0" />
            <el-option label="审核不通过" value="13" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="check(formRef)">审核确认</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row style="padding-top: 10px">
      <el-button
        v-if="['0', '1'].includes(detail.activityStatus)"
        v-hasPermi="['activity:seminar:cancel']"
        type="danger"
        size="small"
        @click="cancelActvity()"
        >取消活动</el-button
      >
      <el-button
        type="primary"
        size="small"
        v-if="['-1', '1'].includes(detail.activityStatus)"
        @click="editActivity(detail.activityId, 1, name)"
      >
        编辑修改
      </el-button>
      <!-- <el-button
        v-hasPermi="['activity:seminar:finish']"
        type="primary"
        size="small"
        v-if="['3', '6'].includes(detail.activityStatus)"
        @click="editActivity(detail.activityId, 2, name)"
      >
        办结
      </el-button> -->
    </el-row>
  </div>
</template>
<style scoped>
::v-deep .el-step .el-step__description {
  white-space: pre-line;
}
</style>
